<template>
    <div class="classComp">
        <div class="tabList sa-flex" v-if="props.modelValue.length">
            <el-button v-for="(item, index ) in props.modelValue" :key="item.name"
                :type="props.tabIndex === index ? 'primary' : ''" @click="changeEmit('selTab',index)">{{ item.name }}</el-button>
        </div>
        <div class="sa-flex sa-row-between">
            <el-button @click="state.dialogType='add';state.showDialog = true">添加选项</el-button>
            <el-button type="primary" v-if="props.modelValue.length" plain @click="setTabFun">编辑选项</el-button>
            <el-button type="danger" v-if="props.modelValue.length>1" plain @click="delTab">删除选项</el-button>
            <div v-else style="width: 80px;margin-left: 12px;"></div>
        </div>
        <el-dialog v-model="state.showDialog" :title="`${state.dialogType == 'add' ? '添加' : '修改'}分类`" width="400px"
            @closed="closed">
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="state.form" :rules="formRules" status-icon>
                <el-form-item label="列表名称" prop="name">
                    <el-input v-model="state.form.name" />
                </el-form-item>
            </el-form>
            <div class="addBox-btn sa-flex sa-row-right">
                <el-button type="info" @click="state.showDialog = false"> 取消 </el-button>
                <el-button type="primary" @click="submitForm()"> {{ state.dialogType == 'add' ? '添加' : '修改' }} </el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { computed, reactive, ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { cloneDeep } from '@/sheep/utils/index'

const props = defineProps(['modelValue', 'tabIndex']);
const emit = defineEmits(['update:modelValue','change']);
const ruleFormRef = ref()
const state = reactive({
    dialogType: 'add',
    classList: props.modelValue,
    showDialog: false,
    // 一级节点弹窗数据
    form: {
        name: '',
    },
});

function setTabFun() {
    state.form = cloneDeep(state.classList[props.tabIndex]);
    state.dialogType='set';
    state.showDialog = true
}
const update = () => {
    emit('update:modelValue', cloneDeep(state.classList));
}
const changeEmit = (type,emitData={}) => {
    emit('change', { type, data:emitData });
}
const formRules = {
    name: [
        { required: true, message: '请输入商品列表名称', trigger: 'blur' },
        { min: 2, max: 10, message: '长度在 2 到 8 个字符', trigger: 'blur' },
    ],
}
function delTab(){
    ElMessageBox.confirm(
    '确认删除吗，删除后无法恢复?',
    '警告',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        let ind = props.tabIndex
        state.classList.splice(ind,1)
        if(state.classList.length <= ind){
            changeEmit('selTab',ind - 1)
        }
        update()
        changeEmit('delTab',ind)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })

}
const submitForm = async () => {
    if (!ruleFormRef) return
    await ruleFormRef.value.validate((success, msg) => {
        if (success) {
            if(state.dialogType == 'add'){
                state.classList.push({
                    name: state.form.name,
                })
                changeEmit('addTab')
            }else{
                state.classList[props.tabIndex] = cloneDeep(state.form)
            }
            ruleFormRef.value.resetFields()
            update()
            state.showDialog = false

        } else {
            console.log('error submit!', msg)
        }
    })
}
//   关闭弹窗时清除填写内容
const closed = () => {
    ruleFormRef.value.resetFields()
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content{
    padding-right:0px !important;
}
.classComp {
    margin-bottom: 8px;
    .tabList {
        padding: 10px;
        margin-bottom: 10px;
        overflow-x: scroll;
        &>.el-button{
            max-width: 85px;
            min-width: 85px;
            overflow: hidden;
        }



        &::-webkit-scrollbar {
            width: 20px;
            height: 15px;
        }
        &::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        &::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 20px;
        }
        &::-webkit-scrollbar-thumb:hover {
            background: #806af6;
        }
    }
}
</style>